<template>
  <div class="art-video-player">
    <div ref="playerContainer" class="player-container"></div>

    <!-- 移动端预览图 -->
    <div v-if="!isPlaying && isMobile" class="mobile-poster" @click="togglePlay">
      <img v-if="poster" :src="poster" alt="视频预览" class="poster-image" />
      <div v-else class="default-poster">
        <n-icon size="48" color="white">
          <PlayIcon />
        </n-icon>
        <div class="play-text">播放</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch, computed } from 'vue'
import { useMessage } from 'naive-ui'
import { Play as PlayIcon } from '@vicons/ionicons5'
import Artplayer from 'artplayer'

interface Props {
  src: string
  poster?: string
  width?: string | number
  height?: string | number
}

const props = withDefaults(defineProps<Props>(), {
  width: '100%',
  height: '200px'
})

const message = useMessage()
const playerContainer = ref<HTMLDivElement>()
let player: Artplayer | null = null
const isPlaying = ref(false)

// 检测是否为移动端
const isMobile = computed(() => {
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
})

// 创建播放器
const createPlayer = () => {
  if (!playerContainer.value) return

  try {
    player = new Artplayer({
      container: playerContainer.value,
      url: props.src,
      poster: props.poster || '',
      autoplay: false,
      muted: false,
      loop: false,
      volume: 0.7,
      setting: true,
      hotkey: true,
      pip: true,
      lock: true,
      playbackRate: true,
      aspectRatio: true,
      fullscreen: true,
      fullscreenWeb: true,
      subtitleOffset: true,
      miniProgressBar: true,
      mutex: true,
      backdrop: true,
      playsInline: true,
      theme: '#23ade5',
      lang: 'zh-cn',
    })

    // 监听事件
    player.on('ready', () => {
      console.log('播放器准备就绪')
    })

    player.on('play', () => {
      isPlaying.value = true
    })

    player.on('pause', () => {
      isPlaying.value = false
    })

    player.on('error', (error) => {
      console.error('播放器错误:', error)
      message.error('视频播放失败')
    })
  } catch (error) {
    console.error('创建播放器失败:', error)
    message.error('创建播放器失败')
  }
}

// 切换播放状态
const togglePlay = () => {
  if (player) {
    if (isPlaying.value) {
      player.pause()
    } else {
      player.play()
    }
  }
}

// 销毁播放器
const destroyPlayer = () => {
  if (player) {
    player.destroy()
    player = null
  }
}

// 监听 src 变化
watch(() => props.src, (newSrc) => {
  if (player && newSrc) {
    player.switchUrl(newSrc)
  }
})

onMounted(() => {
  createPlayer()
})

onUnmounted(() => {
  destroyPlayer()
})

// 添加默认导出
defineOptions({
  name: 'ArtVideoPlayer'
})
</script>

<style scoped>
.art-video-player {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.player-container {
  width: 100%;
  height: 100%;
}

.mobile-poster {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
}

.poster-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.default-poster {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
}

.play-text {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 500;
}

:deep(.art-player) {
  border-radius: 8px;
}

:deep(.art-video) {
  border-radius: 8px;
}

@media (max-width: 768px) {
  .art-video-player {
    height: 200px;
  }
}
</style>
